import React from "react";
import {
  Button,
  Col,
  Drawer,
  Select,
  Form,
  Input,
  Card,
  Row,
  Cascader,
} from "antd";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next
import style from "./paymentglobal.module.scss";

export default function PaymentGlobal() {
  const { t, i18n } = useTranslation(); // 结构拿出方法
  return (
    <div className={style.PaymentGlobalboss}>
      <div className={style.PaymentGlobalform}>
        <Card
          // title="全球付款"
          title={t("layout.GlobalPayment")}
          extra={<a href="#">More</a>}
          style={{ width: "100%", height: "100%", textAlign: "left" }}
        >
          <Form>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="name"
                  // label="子商户名称"
                  label={t("form.Submerchantname")}
                  rules={[
                    {
                      required: true,
                      // message: "请输入账户号",
                    },
                  ]}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="url"
                  // label="付款方账户名称"
                  label={t("form.PayerAccountName")}
                  rules={[
                    {
                      required: true,
                      message: "请输入账户名称",
                    },
                  ]}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="Identification"
                  // label="付款币种"
                  label={t("form.paymentCurrency")}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="type"
                  // label="收款方账户"
                  label={t("form.Payeeaccount")}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input
                    style={{
                      width: "100%",
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="accountCountry"
                  // label="汇率"
                  label={t("form.Exchangerate")}
                  rules={[
                    {
                      required: true,
                      // message: "请输入归属国家",
                    },
                  ]}
                >
                  <Input
                    style={{
                      width: "100%",
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="currency"
                  // label="买入金额"
                  label={t("form.Purchaseamount")}
                  rules={[
                    {
                      required: true,
                      message: "请输入选择账户币种",
                    },
                  ]}
                >
                  <Input
                    style={{
                      width: "100%",
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="city"
                  // label="汇款用途"
                  label={t("form.PurposeRemittance")}
                  rules={[
                    {
                      required: true,
                      message: "请输入开户银行所在省市",
                    },
                  ]}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="CardType"
                  // label="汇款附言"
                  label={t("form.PostscriptRemittance")}
                  rules={[
                    {
                      required: true,
                      // message: "请输入卡折类型",
                    },
                  ]}
                >
                  <Input
                    style={{
                      width: "100%",
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="largeAmount"
                  label={t("form.AccountRemitter")}
                  //  label="汇款方账户号"
                >
                  <Input
                    style={{
                      width: "100%",
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="swiftcode"
                  label={t("form.CollectionCurrency")}
                  // label="收款币种"
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="transferAmount"
                  //  label="锁定方"
                  label={t("form.LockingParty")}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="detailAddress"
                  // label="卖出金额"
                  label={t("form.Salesamount")}
                >
                  <Input
                    style={{
                      width: "100%",
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <Row gutter={16}>
            <Button type="primary">
              {/* 提交 */}
              {t("form.Submit")}
            </Button>
          </Row>
        </Card>
      </div>
    </div>
  );
}
